<template>
	<view>
		<view class="gift_box" v-show="isshowGift">
			<view class="gift_top">
				<view class="cat_coin">
					猫币剩余：
					<text>{{cat_coin}}</text>
				</view>
				<view class="">
					礼物
				</view>
				<view class="img_box">
					<image src="/static/diqiuquan/wenti.png" mode=""></image>
				</view>
			</view>
			<view class="gift_mid">
				<view class="gift_item" v-for="(item,index) in giftList" :key="index" :class="{active1:menuIndex==index}" @tap="chooseGift(index,item)">

					<image :src="item.pic" mode=""></image>
					<text class="text1">{{item.gift_name}}</text>
					<text class="text2">猫币*{{item.amount}}</text>

				</view>
			</view>
			<view class="gift_bottom">
				<view class="select_box">
					<image src="/static/index/theselected.png" mode="" v-if="isSecret==true" @tap="chooseSecret"></image>
					<image src="/static/index/uncheck.png" mode="" v-else @tap="chooseSecret"></image>
					<text>私密赠送</text>
				</view>
				<view class="btn_box">
					<image class="btn_bg" src="/static/diqiuquan/btn_bg.png"></image>
					<image class="numImg" src="/static/diqiuquan/up.png" mode="" v-show="isShowNum==true" @tap="showchooseNum"></image>
					<image class="numImg" src="/static/diqiuquan/down.png" mode="" v-show="isShowNum==false" @tap="showchooseNum"></image>
					<input type="number" value="1" v-model="giftNum" />
					<text @tap="setGift">发送</text>
				</view>
				<view class="num_box" v-if="isShowNum==true">
					<!-- <image class="num_bg1" src="/static/diqiuquan/num_bg.png"></image> -->
					<text class="numtitle">数量</text>
					<text v-for="(item,index) in giftnum" :key="index" @tap="chooseNum(item.num)">{{item.num}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ["isshowGift", 'cat_coin', 'pay_id', 'payment_id', 'payment_name','type'],

		data() {
			return {
				giftList: [],
				menuIndex: '',
				type_id: 1,
				giftMoney: 50,
				giftNum: 1,
				isSecret: false,
				isShowNum: false,
				giftPic: "http://www.huihejituan.com/tripPictstorage/qmore/gift/balloon.png",
				giftName: '气球',
				giftnum: [{
					num: 1314
				}, {
					num: 520
				}, {
					num: 188
				}, {
					num: 99
				}, {
					num: 66
				}, {
					num: 30
				}, {
					num: 10
				}, {
					num: 6
				}, {
					num: 1
				}]
			};
		},
		onLoad() {
			this.getgiftList()
			// console.log(this.pay_id)
			// console.log(this.payment_id)
		},
		methods: {
			getgiftList() {
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userGift',
					actionName: 'query',
					data: '',
					successBack: function(res) {
						// console.log(res)
						me.giftList = res.data.data
						me.giftList.shift()
						// console.log(me.giftList, '礼物列表1')
					},
				})
			},
			chooseGift(index, item) {
				this.menuIndex = index
				this.type_id = item.id
				this.giftMoney = item.discount_amout
				this.giftName = item.gift_name
				this.giftPic = item.pic
				// this.giftPic=
				// console.log(money)
			},
			setGift() {
				var me = this;
				// console.log(this.giftMoney,this.giftNum,'数量')
				var pay_count = this.giftMoney * this.giftNum;
				if (pay_count > this.cat_coin) {
					uni.showToast({
						title: '猫币不够呢',
						icon: 'none'
					})
					return
				}
				console.log(this.payment_id)
				console.log(this.pay_id)
				if (this.type == 'user') {
					var data = {
						user_id: uni.getStorageSync('user_id'),
						type_id: this.type_id,
						type: 'gift',
						payment_id: this.payment_id,
						pay_count: pay_count,
						source: 'user',
						gift_count: this.giftNum,
					}
				} else {
					var data = {
						user_id: uni.getStorageSync('user_id'),
						type_id: this.type_id,
						type: 'gift',
						pay_id: this.pay_id,
						payment_id: this.payment_id,
						pay_count: pay_count,
						source: 'note',
						gift_count: this.giftNum,
					}
				}

				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.data == '订单完成') {
							var giftData = {
								amount: pay_count.toString(),
								giftName: me.giftName,
								num: me.giftNum.toString(),
								type: 'gift',
								sendNickName: uni.getStorageSync('nick_name'),
								sendUserId: uni.getStorageSync('user_id').toString(),
								user_id: me.payment_id,
								nickName: me.payment_name,
								giftPic: me.giftPic,
							}
							uni.setStorageSync('giftData', giftData);
							me.getuserdata();
							me.hideAll();
							uni.showToast({
								title: '赠送成功',
								icon: 'none'
							})
							me.getyouquanList();

						}
					},
				})
			},
			hideAll() {
				this.$emit('hideAll')
			},
			getuserdata() {
				this.$emit('getuserdata')
			},
			getyouquanList() {
				this.$emit('getyouquanList')
			},
			showchooseNum() { //显示选择数量
				if (this.isShowNum == true) {
					this.isShowNum = false
				} else {
					this.isShowNum = true
				}
			},
			chooseNum(num) { //选择礼物数量
				this.giftNum = num
				this.isShowNum = false
				// console.log(this.giftNum)
			},
			chooseSecret() { //是否公开
				if (this.isSecret == true) {
					this.isSecret = false
				} else {
					this.isSecret = true
				}
			},
		}

	}
</script>

<style scoped>
	.gift_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		height: 663upx;
		z-index: 3000;
		padding: 30upx 24upx 0 24upx;
		box-sizing: border-box;
	
	}

	.gift_top image {
		width: 36upx;
		height: 36upx;
	}

	.cat_coin {
		color: #666666;
		font-size: 28upx;
		width: 300upx;
	}

	.cat_coin text {
		color: #333333;
		font-size: 30upx;
	}

	.img_box {
		width: 300upx;
		display: flex;
		flex-direction: row-reverse;
	}

	.gift_top {
		display: flex;
		justify-content: space-between;
		align-content: center;
		border-bottom: 1upx solid #E6E6E6;
		padding-bottom: 24upx;
	}

	.gift_mid {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;
		border-bottom: 1upx solid #E6E6E6;
	}

	.gift_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25upx 40upx 20upx 40upx;
		/* border: 1upx solid #FFFFFF; */
		border-radius: 10upx;
	}

	.text1 {
		color: #333333;
		font-size: 28upx;
	}

	.text2 {
		color: #999999;
		font-size: 20upx;
	}

	.gift_item image {
		width: 95upx;
		height: 95upx;
	}

	.gift_bottom {
		display: flex;
		justify-content: space-between;
		padding-top: 14upx;
		position: relative;
	}

	.select_box {
		display: flex;
		align-items: center;
		color: #666666;
		font-size: 28upx;
	}

	.select_box image {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.btn_box {
		width: 278upx;
		height: 74upx;
		border: 1upx solid #0DBBAB;
		border-radius: 74upx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.btn_box .btn_bg{
		width: 278upx;
		height: 74upx;
		position: absolute;
	}
	.numImg{
		z-index: 10;
	}

	.btn_box text {

		/* position: absolute; */
		padding-right: 20upx;
		color: #FFFFFF;
		font-size: 28upx;
		z-index: 10;
	}

	.btn_box image {
		width: 26upx;
		height: 15upx;
	}

	.btn_box input {
		width: 85upx;
		color: #47CECF;
		font-size: 28upx;
	}

	.num_box {
		width: 150upx;
		position: absolute;
		right: 175upx;
		top: -400upx;
		text-align: center;
		color: #999999;
		font-size: 28upx;
		padding: 10upx 0;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border: 1upx solid #E6E6E6;
		border-radius: 20upx;
	}
	.num_bg1{
		width:150upx ;
		height: 446upx;
		position: absolute;
	}

	.num_box text {
		padding: 1upx 0;
	}

	.num_box .numtitle {
		color: #47CECF;
	}

	.active1 {
		color: #23b7cb;
		font-size: 15px;
		padding: 5px 15px;
		background: #fff;
		border: 5upx transparent solid;
		border-radius: 10px;
		position: relative;
	}

	.active1:after {
		content: '';
		position: absolute;
		top: -3px;
		bottom: -3px;
		left: -3px;
		right: -3px;
		background: linear-gradient(135deg, #2EEA9D, #059EEA);
		border-radius: 10px;
		z-index: -1;
	}

	#tab-bar {
		padding-top: 48upx;
		background: #FFFFFF;
	}
</style>
